<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet" href="css/global.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/styles.css">
<script src="js/jquery.1.12.4.min.js" charset="UTF-8"></script>
<script src="js/bootstrap.min.js" charset="UTF-8"></script>
<script src="js/swiper.min.js" charset="UTF-8"></script>
<script src="js/global.js" charset="UTF-8"></script>
<!-- <script src="js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script> -->
<!-- 引入layui样式和脚本 -->
<link rel="stylesheet" href="../admin/layui/css/layui.css">
<script src="../admin/layui/layui.js"></script>
<title>收货地址页</title>
</head>
<body>
	<!-- 引入个人中心头部 -->
	<jsp:include page="user-header.jsp"></jsp:include>

	<!-- 添加的表单 -->
	<div id="addDiv" style="display: none; width: 1000">
		<form class="layui-form" style="width: 350px;" lay-filter="addForm">
			<div class="layui-form-item">
				<label class="layui-form-label">收货人名字</label>
				<div class="layui-input-inline">
					<input type="text" name="getName" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">收货人电话</label>
				<div class="layui-input-inline">
					<input type="text" name="getTel" required lay-verify="phone"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" style="display: none">
				<label class="layui-form-label">用户id</label>
				<div class="layui-input-inline">
					<input type="text" name="userId" required lay-verify="required"
						placeholder="" value="${USER_SESSION.userId }" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<!-- <div class="layui-form-item">
				<label class="layui-form-label">是否默认</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="idDefault" lay-verify="required" class="layui-input">
						<option value=""></option>
						<option value="是">是</option>
						<option value="否">否</option>
					</select>
				</div>
			</div> -->
			<div class="layui-form-item">
				<label class="layui-form-label">省</label>
				<div class="layui-input-inline">
					<input type="text" name="province" required lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">市</label>
				<div class="layui-input-inline">
					<input type="text" name="city" required lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">县、区</label>
				<div class="layui-input-inline">
					<input type="text" name="region" required lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">详细地址</label>
				<div class="layui-input-inline">
					<input type="text" name="fullAddress" required
						lay-verify="required" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo2">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 添加的表单结束 -->

	<!-- 修改的表单开始 -->
	<div id="updDiv" style="display: none; width: 1000">
		<form class="layui-form" style="width: 350px;" lay-filter="updForm">
			<div class="layui-form-item" style="display: none">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" name="addId" placeholder="请输入标题"
						autocomplete="off" class="layui-input" layui-disabled disabled>
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">收货人名字</label>
				<div class="layui-input-inline">
					<input type="text" name="getName" required lay-verify="required"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">收货人电话</label>
				<div class="layui-input-inline">
					<input type="text" name="getTel" required lay-verify="phone"
						placeholder="请输入标题" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">省</label>
				<div class="layui-input-inline">
					<input type="text" name="province" required lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">市</label>
				<div class="layui-input-inline">
					<input type="text" name="city" required lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">县、区</label>
				<div class="layui-input-inline">
					<input type="text" name="region" required lay-verify="required"
						placeholder="请输入" autocomplete="off" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">详细地址</label>
				<div class="layui-input-inline">
					<input type="text" name="fullAddress" required
						lay-verify="required" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="formDemo3">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改的表单结束 -->

	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">

			<!-- 引入左侧导航栏 -->
			<jsp:include page="pull-left-bgf.jsp"></jsp:include>
			<c:if test="${ empty USER_SESSION}">
				<h3>您还没有登录呦~</h3>
			</c:if>
			<c:if test="${ not empty USER_SESSION}">

				<div class="pull-right">
					<div class="user-content__box clearfix bgf" style="width: 1080px">
						<div class="title">账户信息-收货地址</div>
						<!-- 表格容器 -->
						<table id="demo" lay-filter="test"></table>
						<!-- 头部工具栏开始 -->
						<script type="text/html" id="toolbarDemo1">
                      <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
                      </div>
                    </script>
						<!-- 头部工具栏结束 -->
						<!-- 行内工具栏开始 -->
						<script type="text/html" id="toolbarDemo2">
                      <div class="layui-btn-container">
                        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete" id="del"><i class="layui-icon">&#xe640;</i>删除</button>
                        <button class="layui-btn layui-btn-xs" lay-event="update"><i class="layui-icon">&#xe642;</i>编辑</button>
                        {{#  if(d.idDefault == "否"){ }}
                        <button class="layui-btn layui-btn-xs" lay-event="updDefault" id="upds">设为默认地址</button>
                        {{#  }}}
                      </div>
                   </script>
						<!-- 行内工具栏结束 -->
					</div>
				</div>

			</c:if>
		</section>
	</div>

	<!-- 监听添加、修改、删除开始 -->
	<script>
		layui.use([ 'table', 'form', 'layer', 'upload' ], function() {
			var table = layui.table;
			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;
			var $ = layui.$;

			//第一个实例
			table.render({
				elem : '#demo',
				url : 'getAddress',//数据接口
				page : true,//开启分页
				id : "idTest",
				toolbar : '#toolbarDemo1',
				cols : [ [ //表头
				{
					field : 'getName',
					title : '收货人名字',
					width : 100
				}, {
					field : 'getTel',
					title : '收货人电话',
					width : 120
				}, {
					field : 'idDefault',
					title : '是否默认',
					width : 90
				}, {
					field : 'province',
					title : '省',
					width : 80
				}, {
					field : 'city',
					title : '市',
					width : 80
				}, {
					field : 'region',
					title : '区县',
					width : 100
				}, {
					field : 'fullAddress',
					title : '详细地址',
					width : 225
				}, {
					title : '操作',
					width : 225,
					toolbar : '#toolbarDemo2'
				} ] ]
			});//表格渲染结束

			//监听事件--头部工具栏监听开始
			table.on('toolbar(test)', function(obj) {
				if (obj.event == "add") {
					// layer.msg('添加');
					layer.open({
						type : 1,
						content : $('#addDiv')
					//添加div弹窗的id
					});
				}
			});//监听事件--头部工具栏监听结束

			//监听事件--行内工具栏监听开始
			table.on('tool(test)', function(obj) {
				var data = obj.data;//当前行内数据
				switch (obj.event) {
				case 'delete':
					layer.confirm('真的删除行么', function(index) {
						//向服务端发送删除指令
						$.post("delAddress", {
							"addId" : data.addId
						}, function(res) {
							if (res.code == 0) {
								obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
							}
							layer.close(index);
							layer.msg(res.msg);
						}, "json")
					});
					break;
				case 'update':
					//layer.msg('编辑');
					//弹窗
					layer.open({
						type : 1,
						content : $('#updDiv')
					});
					//数据回显
					form.val("updForm", data);
					break;
				case 'updDefault':
					layer.confirm('真的修改地址为默认吗？', function(index) {
						//向服务端发送删除指令
						$.post("updAddDefault", {
							"addId" : data.addId
						}, function(res) {
							console.log(res);
							if (res.code == 0) {
								layer.msg(res.msg, {
									time : 1000
								}, function() {
									layer.closeAll();//关闭所有窗口
									table.reload('idTest', {});//表格重载（根据表格id执行）
								})
							}
						}, "json")
					});
					break;
				}
			});//监听事件--行内工具栏监听结束

			//监听表单提交--添加
			form.on('submit(formDemo2)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("insertAddress", data.field, function(res) {
					console.log(res);
					if (res.code == 0) {
						layer.msg(res.msg, {
							time : 1000
						}, function() {
							layer.closeAll();//关闭所有窗口
							table.reload('idTest', {});//表格重载（根据表格id执行）
						})
					}
				}, "json")
				return false;
			});//监听表单提交结束--添加

			//监听表单提交--修改
			form.on('submit(formDemo3)', function(data) {
				//layer.msg(JSON.stringify(data.field));
				$.post("updAddress", data.field, function(res) {
					console.log(res);
					if (res.code == 0) {
						layer.msg(res.msg, {
							time : 1000
						}, function() {
							layer.closeAll();//关闭所有窗口
							table.reload('idTest', {});//表格重载（根据表格id执行）
						})
					} else {
						layer.msg(res.msg, {
							time : 1000
						}, function() {
							layer.closeAll();//关闭所有窗口
							table.reload('idTest', {});//表格重载（根据表格id执行）
						})
					}
				}, "json")
				return false;
			});//监听修改表单提交结束--修改

		});//脚本结束
	</script>

	<!-- 监听添加、修改、删除结束 -->
	<!-- 引入右侧菜单 -->
	<jsp:include page="right-nav.jsp"></jsp:include>
	<!-- 底部信息 -->
	<!-- 引入脚部 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
</html>